<template>
  <div class="weatherBox">
    <div class="">
      <div class="flex mr-[30px] tqfl mt-[10px]">
        <img :class="getfx(weatherObj.fx)" src="@/assets/image/positionIcon.png" alt="" />
        <div class="ml-[20px]">
          <span class="mr-[20px]">{{ weatherObj.fx }}</span>
          <span>{{ weatherObj.flfw || 0 }}级</span>
        </div>
      </div>
      <div class="flex">
        <img style="margin-top: 0px" :src="weatherObj.tpdz" alt="" />
        <div class="ml-[10px] weatherwd">
          <span class="mr-[10px]">{{ weatherObj.tqqk }}</span>
          <span>{{ weatherObj.wd }}˚C</span>
        </div>
      </div>
    </div>
    <div class="timeBox">
      <!-- <img class="timeImg" src="../../assets/image/dash/time.png" style="width:44px;height:42px"  alt=""> -->
      <div class="nowDate">{{ nowDate }}</div>
      <div>
        <!-- <img class="dataImg" src="../../assets/image/dash/data.png" style="width:25px;height:25px"  alt=""> -->
        <span>{{ nowMouth }}</span>
        <span>{{ nowDay }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { queryWeather } from '@/service'
const weatherObj: any = ref({})
const timeInter: any = ref()
const nowDate: any = ref()
const nowMouth: any = ref()
const nowDay: any = ref()
const getList = () => {
  // 当前天气信息
  queryWeather({ xzqdm: '320101' }).then((res: any) => {
    weatherObj.value = res
  })
}
const getDate = () => {
  const checkTime = function (i: any) {
    if (i < 10) {
      i = '0' + i
    }
    return i
  }
  const nowdate = new Date()
  const h = nowdate.getHours()
  const m = nowdate.getMinutes()
  const s = nowdate.getSeconds()
  nowDate.value = checkTime(h) + ':' + checkTime(m) + ':' + checkTime(s)
  nowMouth.value = nowdate.toLocaleDateString()
  const day = nowdate.getDay()
  const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  nowDay.value = weeks[day]
  // 定时凌晨刷新
  if ((checkTime(h) == '00' || checkTime(h) == '24') && checkTime(m) == '00' && checkTime(s) == '00') {
    window.document.location.reload();
  }
}
timeInter.value = setInterval(() => {
  getDate()
}, 1000) //反复执行函数
getDate()
onMounted(() => {
  getList()
})
onUnmounted(() => {
  clearInterval(timeInter.value)
  timeInter.value = null
})

function getfx(val: any) {
  if (val == '北风') {
    return 'bf'
  } else if (val == '东北风') {
    return 'dbf'
  } else if (val == '东风') {
    return 'df'
  } else if (val == '东南风') {
    return 'dnf'
  } else if (val == '南风') {
    return 'nf'
  } else if (val == '西南风') {
    return 'xnf'
  } else if (val == '西风') {
    return 'xf'
  } else if (val == '西北风') {
    return 'xbf'
  }
}
</script>
<style lang="less" scoped>
.weatherBox {
  position: absolute;
  left: 1040px;
  top: 34px;
  z-index: 10;
  width: 1680px;
  height: 65px;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,0.8);
  font-size: 24px;
  font-weight: bolder;
  z-index: 99999999;
  .tqfl {
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #fbfbfb;
    opacity: 0.8;
  }

  img {
    border: none;
    width: 44px;
    height: 42px;
    margin-top: 0px;
  }

  .timeBox {
    font-size: 48px;
    font-family: Century Gothic;
    font-weight: bold;
    color: #ffffff;
    opacity: 0.8;
    margin-top: 15px;
    // position: relative;
    // .timeImg{
    //   position: absolute;
    //   top: -6px;
    //   left: -18px;
    // }
    // .dataImg{
    //   position: absolute;
    //   top: 43px;
    //   left: -5px;
    // }
    .nowDate {
      // font-size: 42px;
    }
    div {
      line-height: 0.8;

      &:nth-of-type(1) {
        font-size: 33px;
        text-align: center;
      }
    }

    span {
      font-size: 24px;

      &:nth-of-type(1) {
        margin-right: 10px;
      }
    }
  }
}
.weatherwd {
  margin: 1px 10px 0 20px;
}
.bf {
  transform: rotate(135deg);
}
.dbf {
  transform: rotate(180deg);
}
.df {
  transform: rotate(225deg);
}
.dnf {
  transform: rotate(270deg);
}
.nf {
  transform: rotate(315deg);
}
.xnf {
  transform: rotate(0deg);
}
.xf {
  transform: rotate(45deg);
}
.xbf {
  transform: rotate(90deg);
}
</style>
